<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header card-primary card-inverse">
                <h3 class="card-title">Line Chart</h3>
            </div>
            <div class="card-block">
                <canvas baseChart
                    [datasets]="lineChartData"
                    [labels]="lineChartLabels"
                    [options]="lineChartOptions"
                    [legend]="lineChartLegend"
                    [chartType]="lineChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"
                    height="140" >
                </canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header card-primary card-inverse">
                <h3 class="card-title">Bar Chart</h3>
            </div>
            <div class="card-block">
                <canvas baseChart
                    [datasets]="barChartData"
                    [labels]="barChartLabels"
                    [options]="barChartOptions"
                    [legend]="barChartLegend"
                    [chartType]="barChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"
                    height="140" >
                </canvas>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header card-primary card-inverse">
                <h3 class="card-title">Doughnut Chart</h3>
            </div>
            <div class="card-block">
                <canvas baseChart
                    [data]="doughnutChartData"
                    [labels]="doughnutChartLabels"
                    [chartType]="doughnutChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"
                    height="140" >
                </canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header card-primary card-inverse">
                <h3 class="card-title">Radar Chart</h3>
            </div>
            <div class="card-block">
                <canvas baseChart
                    [datasets]="radarChartData"
                    [labels]="radarChartLabels"
                    [chartType]="radarChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"
                    height="140" >
                </canvas>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header card-primary card-inverse">
                <h3 class="card-title">Pie Chart</h3>
            </div>
            <div class="card-block">
                <canvas baseChart
                    [data]="pieChartData"
                    [labels]="pieChartLabels"
                    [chartType]="pieChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"
                    height="140" >
                </canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header card-primary card-inverse">
                <h3 class="card-title">Polar Area Chart</h3>
            </div>
            <div class="card-block">
                <canvas baseChart
                    [data]="polarAreaChartData"
                    [labels]="polarAreaChartLabels"
                    [legend]="polarAreaLegend"
                    [chartType]="polarAreaChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"
                    height="140" >
                </canvas>
            </div>
        </div>
    </div>
</div>
